<template>
        <a-popover placement="bottom" trigger="click"
          @visibleChange="handleClickChange">
          <template #content>
            <div  style="width:229px;
                border-radius: 5px;
              ">
              <div  style="display: flex;  
                justify-content: space-around; 
                align-items: center;
                ; 
                height: 36px;" >
                <div  style="display: flex;">
                  修改为
                </div>
                <div style="display: flex; flex-direction: column; justify-content: center;  position: relative;">
                  <a-input v-model:value="state.ph" style="width: 80px; height: 30px;" />
                  <span v-show="!testPronounceText" style="font-size: 12px; color: red;position: absolute; bottom: -22px; left: 0;" >格式不正确</span>
                </div>
                <div>
                  <a-button @click="insertPronounce">确认</a-button>
                </div>
              </div>
              <div style="font-size: 12px; margin-top: 18px; color: #77797B;">1-4声拼音后面加1~4,轻声加5</div>
              <div style="font-size: 12px; margin-top: 18px; color: #77797B;">示例: <span>汉 - han4</span> 、 <span>字 - zi4</span></div>
              <div>
              </div>
            </div>
          </template>
          <NodeViewWrapper class="vue-component" ref="ViewWrapper" contenteditable="false" @click="handleClick">
                  <div contenteditable="false" class="pronounce" >
              <NodeViewContent  class="text_content" contenteditable="false" 
              :style="{'background-color': isSelect ? '#a6d2ff' : '#00000000'}"/>
                      <span class="text_spell" contenteditable="false" >{{ props.node.attrs.ph || ''  }}</span>
                  </div>
          </NodeViewWrapper>
        </a-popover>
</template>

<script setup>
import { NodeViewContent, NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'

import { computed, ref,reactive } from 'vue'
import {
} from "@ant-design/icons-vue";

const props = defineProps({
  node: Object
})

const state = reactive({
  ph: ''
})

// 判断是否选中
const isSelect = computed(() => {
  return props.selected
})

const handleClick = () => {
  // debugger
  // const pos = props.getPos(); // 获取当前节点的位置
  // props.editor.commands.setNodeSelection(pos); // 设置选中状态

}

// 测试输入修改发音的内容是否符合条件
const testPronounceText = computed(() => {
  if (state.ph == '' || state.ph == null) return true
  return /^[a-zA-Z]{1,9}[1-5]$/.test(state.ph)
})

// 修改发音
const insertPronounce = () => {
  // 符合基础条件 +  符合条件
  if (!testPronounceText.value) return
     props.node.attrs.ph = state.ph
}

</script>

<style lang="less" scoped>
.vue-component {
  display: inline-block;
  .pronounce{
  display: flex;
  align-items: center;
  cursor: pointer;
  // padding:3px 0;
  // line-height: 1.3;

  &:hover{
    & .text_content{
      border-color: #a84a00;
    }
    & .text_spell{
      background: #a84a00;
    }
  }
    .text_content{
      border-bottom: 2px solid #d26700;
      height: 100%;
      box-sizing: border-box;

    }
    .text_spell{
      background: #d26700 !important;
      color: #fff;
      padding: 0 3px;
      margin-right: 4px;
    }
  }

}

</style>